<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <title>Skitter幻灯片</title>
    <link href="css/styles.css" type="text/css" media="all" rel="stylesheet" />
    <!-- Skitter Styles -->
    <link href="css/skitter.styles.css" type="text/css" media="all" rel="stylesheet" />
    <!-- Skitter JS -->
    <script type="text/javascript" language="javascript" src="js/jquery-1.6.3.min.js"></script>
    <script type="text/javascript" language="javascript" src="js/jquery.easing.1.3.js"></script>
    <script type="text/javascript" language="javascript" src="js/jquery.skitter.min.js"></script>
    <!-- Init Skitter -->
    <script type="text/javascript" language="javascript">
    $(document).ready(function() {
        $('.box_skitter_large').skitter({
            label: false,
            numbers: false,
            theme: 'square'
        });
        $('.box_skitter_small').skitter({
            label: false,
            numbers: false,
            interval: 1000,
            theme: 'clean'
        });
        $('.box_skitter_medium').css({
            width: 400,
            height: 200
        }).skitter({
            show_randomly: false,
            // dots: true,
            interval: 4000,
            numbers_align: 'center',
            theme: 'round'
        });
        $('.box_skitter_normal').css({
            width: 400,
            height: 300
        }).skitter({
            animation: 'blind',
            interval: 2000,
            hideTools: true,
            theme: 'minimalist'
        });
    });
    </script>
</head>

<body>
    <div style="width:800px;margin:0 auto;">
        <div class="box_skitter box_skitter_large">
            <ul>
                <li>
                    <a href="#cubeRandom"><img src="images/example/001.jpg" class="cubeRandom" /></a>
                    <div class="label_text">
                        <p>cubeRandom</p>
                    </div>
                </li>
                <li>
                    <a href="#block"><img src="images/example/002.jpg" class="block" /></a>
                    <div class="label_text">
                        <p>block</p>
                    </div>
                </li>
                <li>
                    <a href="#cubeStop"><img src="images/example/003.jpg" class="cubeStop" /></a>
                    <div class="label_text">
                        <p>cubeStop</p>
                    </div>
                </li>
            </ul>
        </div>
        <div style="height:40px;overflow:hidden;"></div>
        <div class="box_skitter box_skitter_small">
            <ul>
                <li>
                    <a href="#horizontal"><img src="images/example/001.jpg" class="horizontal" /></a>
                    <div class="label_text">
                        <p>horizontal</p>
                    </div>
                </li>
                <li>
                    <a href="#showBars"><img src="images/example/002.jpg" class="showBars" /></a>
                    <div class="label_text">
                        <p>showBars</p>
                    </div>
                </li>
            </ul>
        </div>
        <div style="height:40px;overflow:hidden;"></div>
        <div class="box_skitter box_skitter_medium">
            <ul>
                <li>
                    <a href="#fadeFour"><img src="images/example/001.jpg" class="fadeFour" /></a>
                    <div class="label_text">
                        <p>fadeFour</p>
                    </div>
                </li>
                <li>
                    <a href="#paralell"><img src="images/example/002.jpg" class="paralell" /></a>
                    <div class="label_text">
                        <p>paralell</p>
                    </div>
                </li>
                <li>
                    <a href="#blind"><img src="images/example/003.jpg" class="blind" /></a>
                    <div class="label_text">
                        <p>blind</p>
                    </div>
                </li>
            </ul>
        </div>
        <div style="height:110px;overflow:hidden;"></div>
        <div class="box_skitter box_skitter_normal">
            <ul>
                <li>
                    <a href="#directionTop"><img src="images/example/001.jpg" class="directionTop" /></a>
                    <div class="label_text">
                        <p>directionTop</p>
                    </div>
                </li>
                <li>
                    <a href="#directionBottom"><img src="images/example/002.jpg" class="directionBottom" /></a>
                    <div class="label_text">
                        <p>directionBottom</p>
                    </div>
                </li>
                <li>
                    <a href="#directionRight"><img src="images/example/003.jpg" class="directionRight" /></a>
                    <div class="label_text">
                        <p>directionRight</p>
                    </div>
                </li>>
            </ul>
        </div>
    </div>
</body>

</html>
